<template>
	<div class="image-show" v-if="srcsArr.length == 1">
		<el-image
			v-for="item in srcsArr"
			:key="item"
			:src="item"
			:preview-src-list="srcsArr"
			style="width: 100px; height: 100px; object-fit: cover;"
		></el-image>
	</div>
	<div class="image-show" v-else-if="srcsArr.length > 1">
		<el-button type="text" icon="el-icon-view" @click="visible = true">查看图片</el-button>

		<el-dialog :visible.sync="visible">
			<div style="display: flex; gap: 20px;">
				<el-image
					v-for="(item, index) in srcsArr"
					:key="index"
					:src="item"
					style="width: 100px; height: 100px; object-fit: cover; border-radius: 15px;"
					:preview-src-list="srcsArr"
					:initial-index="index"
				></el-image>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: "image-show",
	props: {
		srcs: {
			type: [Array, String],
			default: () => [],
		},
	},
	data() {
		return {
			visible: false,
		}
	},
	computed: {
		srcsArr() {
			return Array.isArray(this.srcs) ? this.srcs : this.srcs.split(",")
		},
	},
	created() {},
	methods: {},
	components: {},
}
</script>

<style lang="scss" scoped></style>
